<template>
  <a-modal
    v-model="visible"
    title="新增记录"
    @ok="handleOk"
    :confirm-loading="confirmLoading"
    @cancel="$emit('update:visible', false)"
    :width="560"
  >
    <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" style="padding-left: 18px;">
      <a-form-item label="拜访时间" style="margin: 0;">
        <a-input v-show="false" v-decorator="['notes', { rules: [{ required: true, message: '' }] }]" />
        <a-form-item style="float:left; margin-right: 16px;">
          <a-date-picker
            valueFormat="YYYY-MM-DD"
            placeholder="请选择日期"
            v-decorator="['visitTime1', { rules: [{ required: true, message: '日期不能为空' }] }]"
            style="width: 142px;"
          />
        </a-form-item>
        <a-form-item style="float:left;">
          <a-time-picker
            valueFormat="hh:mm"
            format="hh:mm"
            placeholder="请选择时间"
            v-decorator="['visitTime2', { rules: [{ required: true, message: '时间不能为空' }] }]"
            style="width: 142px;"
          />
        </a-form-item>
      </a-form-item>
      <a-form-item label="拜访地点">
        <a-input
          placeholder="请输入拜访地点"
          :maxLength="100"
          v-decorator="['visitAddress', { rules: [{ required: true, message: '拜访地点不能为空' }] }]"
          style="width: 300px;"
        />
      </a-form-item>
      <a-form-item label="拜访记录">
        <a-input v-show="false" v-decorator="['visitPicture', { rules: [{ required: true, message: '图片不能为空' }] }]" />
        <div style="float:left;">
          <uploadImg style="height: 104px;" :val="logos" @upData="upData">
            <div class="uploadBox">
              <div>
                <a-icon type="plus-circle" theme="filled" style="color:#6B6BF2;font-size: 20px;margin-bottom: 10px;" />
              </div>
              <div>
                上传拜访记录
              </div>
            </div>
          </uploadImg>
        </div>
        <div class="uploadFont">
          支持 JPG、JPEG、PNG、BMP 格式，大小不超过 5 MB。
        </div>
      </a-form-item>
      <a-form-item label="拜访详情">
        <a-textarea
          placeholder="请输入"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          :maxLength="300"
          v-decorator="['visitInfo', { rules: [{ required: true, message: '拜访详情不能为空' }] }]"
          style="width: 300px;"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
// import moment from "moment";
import uploadImg from "../../../component/uploadImg";
import { postCrmVisitRecords } from "../../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    val: {
      type: String,
      default: ""
    }
  },
  components: {
    uploadImg
  },
  data() {
    return {
      form: this.$form.createForm(this, {}),
      confirmLoading: false,
      logos: ""
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.form.resetFields();
        this.logos = "";
      }
      setTimeout(() => {
        this.form.setFieldsValue({
          notes: "1234",
          visitAddress: this.val
        });
      });
    }
  },
  methods: {
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.onPostCrmVisitRecords(values);
        }
      });
    },
    async onPostCrmVisitRecords(v) {
      try {
        this.confirmLoading = true;
        await postCrmVisitRecords({
          visitTime: v.visitTime1 + " " + v.visitTime2 + ":00",
          visitAddress: v.visitAddress,
          visitInfo: v.visitInfo,
          visitPicture: v.visitPicture,
          customerId: this.$route.query.id,
          customerName: this.$route.query.name
        });
        this.$notification.success({ message: "添加成功" });
        this.confirmLoading = false;
        this.$emit("upDate");
        this.$emit("update:visible", false);
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    upData(e) {
      this.logos = e;
      setTimeout(() => {
        this.form.setFieldsValue({
          visitPicture: e
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.uploadBox {
  width: 144px;
  height: 94px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.uploadFont {
  float: left;
  width: 140px;
  margin-left: 12px;
  font-weight: 400;
  color: #767885;
  line-height: 18px;
  font-size: 12px;
  padding-top: 6px;
}
</style>
